<template>
  <div class="boxborder2">
    <div class="dottedLine">
      <div class="dottedLineleft"></div>
      <div class="dottedLinetop"></div>
      <div class="dottedLineright"></div>
    </div>
    <div class="dottedContent">
      <div class="dottedTitle" v-if="label != 0">
        <label
          class="titleLabel"
          :style="{
            fontSize: styleType.fontSize,
            color: styleType.color
          }"
        >
          {{ label }}
        </label>
      </div>
      <slot></slot>
    </div>
    <div class="dottedLineBot">
      <div class="dottedLineleft"></div>
      <div class="dottedLinetop"></div>
      <div class="dottedLineright"></div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'DBoxBorder2',
  props: {
    label: {
      type: String,
      default: "0"
    },
    styleType: {
      type: Object,
      default () {
        return {
          color: "#fff",
          fontSize: "18px"
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
$background: rgba(255, 255, 255, 0.05);
$backgroundBright: rgba(255, 255, 255, 0.3);
$borderColor: #03895e;
@mixin widthHeight {
  width: 10px;
  height: 10px;
}

.boxborder2 {
  .dottedContent {
    width: 100%;
    height: 100%;
    background: $background;
    .dottedTitle {
      border-bottom: 1px dashed #949090;
      padding: 0px 10px 10px;
      .titleLabel {
        padding-left: 10px;
      }
    }
  }
  .dottedLine {
    display: flex;
    justify-content: space-between;
    background: $background;

    .dottedLineleft {
      @include widthHeight;
      border-top: 2px solid $borderColor;
      border-left: 2px solid $borderColor;
    }

    .dottedLinetop {
      width: 100%;
      border-top: 1px solid $backgroundBright;
    }

    .dottedLineright {
      @include widthHeight;
      border-top: 2px solid $borderColor;
      border-right: 2px solid $borderColor;
    }
  }

  .dottedLineBot {
    display: flex;
    justify-content: space-between;
    background: $background;

    .dottedLineleft {
      @include widthHeight;
      border-bottom: 2px solid $borderColor;
      border-left: 2px solid $borderColor;
    }

    .dottedLinetop {
      width: 100%;
      border-bottom: 1px solid $backgroundBright;
    }

    .dottedLineright {
      @include widthHeight;
      border-bottom: 2px solid $borderColor;
      border-right: 2px solid $borderColor;
    }
  }
}
</style>